<template>
  <static-container>
    <static-container-header>
      <template>
        <el-breadcrumb
          size="large">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item :to="true" :key="1" @click.native="close">佣金报表</el-breadcrumb-item>
            <template v-if="showEffectDetail">
              <el-breadcrumb-item :to="true" :key="2" @click.native="close">下级代理佣金</el-breadcrumb-item>
              <el-breadcrumb-item :key="3">佣金详情</el-breadcrumb-item>
            </template>
            <template v-else>
              <el-breadcrumb-item :key="2">下级代理佣金</el-breadcrumb-item>
            </template>

          </transition-group>
        </el-breadcrumb>
      </template>
      <template slot="sub-title">
        时间：{{info.row.settle_date}}
        下级代理金额：{{info.row.proxy_comm | currency}}
      </template>
      <template slot="right">
        <el-button
          size="medium"
          @click="close"> 返回</el-button>
      </template>
    </static-container-header>
    <static-container-body>
      <div class="low-proxy-tabs">
        <div class="low-proxy-tabs__item" :class="{active: activeTab === 1}" @click="activeTab = 1">抽佣模式</div>
        <div class="low-proxy-tabs__item" v-if="info.modeInfo.indexOf(2) > -1" :class="{active: activeTab === 2}" @click="activeTab = 2">分成模式</div>
      </div>
      <low-proxy-rake v-if="activeTab === 1" :info="info" v-model="showEffectDetail"></low-proxy-rake>
      <low-proxy-tree v-else :info="info"></low-proxy-tree>
    </static-container-body>
  </static-container>
</template>

<script>
  // import {subCommissionApi as getApi} from '@/services/api/report';
  //
  // import {grid} from '@/build';
  // import LowProxyDetail from './low-proxy-detail';
  import LowProxyRake from './low-proxy-rake';
  import LowProxyTree from './low-proxy-tree';

  export default {
    name: "low-proxy",

    // mixins: [grid],

    props: ['info'],

    components: {
      // LowProxyDetail,
      LowProxyRake,
	    LowProxyTree,
    },

    inject: ['closeDetail'],

    data() {
      return {
        // filters: {
        //   settleDate: this.info.row.settle_date,
        // },
        // effectDetail: undefined,
        // tableData: [],
        activeTab:1,
        showEffectDetail:false,
        componentName:'LowProxyRake',
      };
    },

    watch:{
      activeTab(val){
        if(val === 2){
          if (this.showEffectDetail) {
            this.showEffectDetail = false;
          }
          // this.close();
        }
      }
    },

    methods: {
      // openEffectDetail(row, index) {
      //   this.effectDetail = {...this.filters, subType: index + 1};
      // },
      // closeEffectDetail() {
      //   this.effectDetail = undefined;
      // },
      close() {
        if (this.showEffectDetail) {
          this.showEffectDetail = !this.showEffectDetail;
        } else {
          this.closeDetail();
        }
      },
    },

    mounted() {
      // this.bindGet(getApi, 'tableData', {
      //   action: 'getGrid',
      //   sendingData: 'filters',
      // });
      //
      // this.getAll();
    }
  };
</script>

<style lang="scss" scoped>
  @include b(low-proxy-tabs){
    /*width: 390px;*/
    max-width: 390px;
    /*height: 40px;*/
    display: inline-flex;
    background: #FBFBFB;
    border: 1px solid #DEDEDE;
    border-radius: 8px;
    margin-bottom: 31px;
    @include e(item){
      width: 195px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      opacity: .4;
      color: #000000;
      transition: all .5s;
      cursor: pointer;
      &.active{
        background: #1E5ADC;
        box-shadow: 0 6px 18px 0 rgba(0,0,0,0.18);
        border-radius: 8px;
        color: #FFFFFF;
        opacity: 1;
        font-weight: 700;
      }
    }
  }
</style>